<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>问题 | 码上知道</title>

		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0">

		<link rel="shortcut icon " type="images/x-icon" href="image/favicon.ico" />
		<link href="https://cdn.bootcss.com/font-awesome/5.13.0/css/all.css" rel="stylesheet">
		<link href="https://cdn.bootcss.com/semantic-ui/2.4.1/semantic.min.css" rel="stylesheet">
		<link href="vendor/Editor.md/css/editormd.preview.min.css" rel="stylesheet" />
		<link href="css/common.css" rel="stylesheet" />
		<link href="css/showQuestion.css" rel="stylesheet" />
		<link href="css/answerList.css" rel="stylesheet" />

		<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
		<script src="https://cdn.bootcss.com/semantic-ui/2.4.1/semantic.min.js"></script>
		<!--markdown解析成html需要引入额外的js文件-->
		<script src="vendor/Editor.md/lib/marked.min.js"></script>
		<script src="vendor/Editor.md/lib/prettify.min.js"></script>
		<script src="vendor/Editor.md/lib/raphael.min.js"></script>
		<script src="vendor/Editor.md/lib/underscore.min.js"></script>
		<script src="vendor/Editor.md/lib/sequence-diagram.min.js"></script>
		<script src="vendor/Editor.md/lib/flowchart.min.js"></script>
		<script src="vendor/Editor.md/lib/jquery.flowchart.min.js"></script>
		<script src="vendor/Editor.md/editormd.min.js"></script>
		<script src="js/common.js"></script>
		<script src="js/showQuestion.js"></script>
		<script src="js/loadAnswers.js"></script>
	</head>
	<body>
		<div id="sidebar" class="ui left sidebar thin vertical inverted menu">
			<div id="sidebaruser" class="item">
				<div id="sidebarheadphoto">
				</div>
				<div id="sidebarlogintips">
					您还未登录<br />请<a class="logintrigger" href="javascript:void(0);">&nbsp;登录&nbsp;</a>或<a href="register.html">&nbsp;注册&nbsp;</a>
				</div>
			</div>
			<a class="item" href="index.html">
				首页<i class="fas fa-home icon"></i>
			</a>
			<a class="item" href="index.html">
				看问答<i class="fas fa-comments icon"></i>
			</a>
			<a class="item" href="article.html">
				看文章<i class="fas fa-book icon"></i>
			</a>
			<a class="item" href="https://github.com/jxzhangaoran/mszdqabbs">
				关于网站<i class="fas fa-rss icon"></i>
			</a>
			<a class="item" href="https://github.com/jxzhangaoran">
				关于作者<i class="fas fa-at icon"></i>
			</a>
			<a class="item mobilelogined loginhidden" href="invite.html">
				邀请回答<span class="inviteNumber">0</span><i class="envelope outline icon"></i>
			</a>
			<a class="item mobilelogined loginhidden" href="me.html">
				我的<i class="user icon"></i>
			</a>
			<a class="item mobilelogined loginhidden" href="javascript:void(0)" id="mobilecancellogin">
				注销登录<i class="power off icon"></i>
			</a>
			<div id="sidebarlogocontainer" class="item" style="	border-bottom: none !important;">
				<div id="sidebarlogo">
				</div>
				<div id="sidebarlogotips">
					2020<br />By @Matsk
				</div>
			</div>
		</div>
		<div class="dimmed pusher">
			<header>
				<div class="ui borderless main menu fixed">
					<a href="javascript:void(0)" id="togglePusher" class="item showhigherthan900">
						<i class="fa fa-bars"></i>
					</a>
					<div class="ui text container" style="max-width: 700px !important;">
						<div href="#" class="header item">
							<img src="image/logo.png" id="navlogo" style="height: 30px; width: auto;cursor: pointer;" alt="码上知道" />
						</div>
						<div class="right menu">
							<a href="index.html" class="item hidelowerthan900"><i class="fas fa-comments icon"></i>&nbsp;看问答</a>
							<a href="article.html" class="item hidelowerthan900"><i class="fas fa-book icon"></i>&nbsp;看文章</a>
							<div class="ui simple dropdown item hidelowerthan900">
								更多 <i class="dropdown icon"></i>
								<div class="menu">
									<a class="item" href="https://github.com/jxzhangaoran/mszdqabbs"><i class="fas fa-rss icon"></i>&nbsp;关于网站</a>
									<a class="item" href="https://github.com/jxzhangaoran"><i class="fas fa-at icon"></i>&nbsp;关于作者</a>
								</div>
							</div>
							<div id="search" class="item ui search">
								<div class="ui icon input">
									<i class="search link icon " id="searchicon"></i>
									<input type="text" class="prompt" placeholder="用户/问答/文章">
								</div>
							</div>
						</div>
						<div id="headphotoitem" class="item hidelowerthan900" style="position: absolute; right: 30px; margin-top: -2.5px;">
							<div id="headphotocontainer" style="width: 40px;
						height: 40px;
						border: 1.5px solid dimgray;
						margin-top: -6px;
						border-radius: 50% !important;
						background-image: url(image/default_headphoto.png);
						background-size: 100% 100%;
						background-position: center;
						background-repeat: no-repeat;">
								<i class="circle icon msgTipRedPoint"></i>
							</div>
							<div id="usertips" class="ui custom popup top left transition hidden">
								<div id="notlogin">
									您还未登录<br />请<a class="logintrigger" href="javascript:void(0);">&nbsp;登录&nbsp;</a>或<a href="register.html">&nbsp;注册&nbsp;</a>
								</div>
								<div id="logined" class="loginhidden">
									<div class="usernamediv">
										欢迎回来<br /><span id="usernameinfo"></span>
									</div>
									<div class="ui divider"></div>
									<div class="ui vertical pointing menu">
										<a class="item" href="invite.html">
											邀请回答<span class="inviteNumber" style="margin-left: 1em;">0</span><i class="envelope outline icon" style="margin-top: 0.2em"></i>
										</a>
										<a class="item" href="me.html">
											我的<i class="user icon"></i>
										</a>
										<a class="item" id="pccancellogin">
											注销<i class="power off icon"></i>
										</a>
									</div>
								</div>
							</div>
						</div>
					</div>
				</div>

				<div class="ui modal" id="loginmodal">
					<i class="close icon"></i>
					<div class="header" style="text-align: center;">
						欢迎
					</div>
					<div class="content" style="text-align: center;">
						<form class="ui form" id="loginform">
							<div class="ui stacked segment">
								<div class="field" id="usernamefield">
									<div class="ui left icon input">
										<i class="address card icon"></i>
										<input id="usernameinput" type="text" name="username" placeholder="用户名或电子邮箱" autocomplete="off" />
									</div>
								</div>
								<div class="field" id="passwordfield">
									<div class="ui left icon input">
										<i class="key icon"></i>
										<input id="passwordinput" type="password" name="password" placeholder="密码" autocomplete="off" />
									</div>
								</div>
								<div class="inline field" style="text-align: left;">
									<label data-tooltip="请尝试找回密码或联系QQ:1004529325." data-position="top center"><i class="question circle outline icon"></i>登录遇到问题？</label>
									<a style="float: right;" href="javascript:void(0);" id="getBackPassword">找回密码</a>
								</div>
								<div class="inline field" style="text-align: left;">
									<label><i class="question circle outline icon"></i>新用户？</label>
									<a style="float: right;" href="javascript:void(0);" id="goRegister">注册账号</a>
								</div>
								<div class="ui fluid large blue submit button" id="loginbtn">登录</div>
							</div>
							<div class="ui error message" id="loginerrorlist">
								<ul class="list">

								</ul>
							</div>
						</form>
					</div>
				</div>
				<!-- 找回密码 -->
				<div class="ui modal" id="findPasswordModal">
					<i class="close icon"></i>
					<div class="header" style="text-align: center;">
						请输入您注册时的邮箱
					</div>
					<div class="content" style="text-align: center;">
						<form class="ui form">
							<div class="ui stacked segment">
								<div class="field" id="findpasswordfield">
									<div class="ui left icon input">
										<i class="envelope open icon"></i>
										<input id="findpasswordemailinput" type="text" name="findpasswordemail" placeholder="example@abc.com"
										 autocomplete="off" />
									</div>
								</div>
								<div class="field" id="findpasswordverifycodefield" style="display: none;">
									<div class="ui left icon input">
										<i class="code icon"></i>
										<input id="findpasswordverifycodeinput" type="text" name="findpasswordverifycode" placeholder="6位数字验证码"
										 autocomplete="off" />
									</div>
								</div>
								<div class="field" id="findpasswordinputfield" style="display: none;">
									<div class="ui left icon input">
										<i class="lock icon"></i>
										<input id="newpasswordinput" type="password" name="newpassword" placeholder="包含字母和数字，6-20位" autocomplete="off" />
									</div>
								</div>
								<div class="ui fluid large blue button" id="findpasswordbtn" style="font-size: 1em;">找回密码</div>
								<div class="ui fluid large blue button disabled" id="findpasswordbtn_step2" style="font-size: 1em;display:none">下一步</div>
								<div class="ui fluid large blue button disabled" id="findpasswordbtn_step3" style="font-size: 1em;display:none">确认修改</div>
							</div>
							<div class="ui error message" id="findpassworderrorlist">
								<ul class="list">

								</ul>
							</div>
						</form>
					</div>
				</div>
				<!-- 成功修改提示模态框 -->
				<div class="ui modal" id="success_modal">
					<i class="close icon"></i>
					<div class="header" style="text-align: center;">
						恭喜你，提交成功啦
					</div>
					<div class="content" style="text-align: center;">
						<img src="image/success.png" class="tip_modal_pic" />
					</div>
					<div class="actions">
						<div id="success_modal_ok" class="ui positive right labeled icon button">
							好的
							<i class="checkmark icon"></i>
						</div>
					</div>
				</div>
				<!-- 失败修改提示模态框 -->
				<div class="ui modal" id="failed_modal">
					<i class="close icon"></i>
					<div class="header" style="text-align: center;">
						抱歉，出了点问题
					</div>
					<div class="content" style="text-align: center;">
						<img src="image/failed.png" class="tip_modal_pic" />
					</div>
					<div class="actions">
						<div id="failed_modal_ok" class="ui negative right labeled icon button">
							好吧
							<i class="checkmark icon"></i>
						</div>
					</div>
				</div>
			</header>

			<main style="margin-top: 5em;">
				<div class="ui container">
					<div class="ui four stackable column grid">
						<!-- 撑开问题块，避免问题块太宽 -->
						<div class="two wide column" style="padding: 0 !important;height: 0 !important;margin-top: 0 !important;margin-bottom: 0 !important;"></div>
						<div class="twelve wide column hideAfterQuestionLoaded" style="display: none;">
							<div class="ui fluid placeholder ">
								<div class="paragraph">
									<div class="line"></div>
									<div class="line"></div>
								</div>
								<div class="image header">
									<div class="line"></div>
									<div class="line"></div>
								</div>
								<div class="paragraph">
									<div class="line"></div>
									<div class="line"></div>
									<div class="line"></div>
									<div class="line"></div>
									<div class="line"></div>
								</div>
							</div>
						</div>
						<div class="twelve wide column showAfterQuestionLoaded" >
							<div class="questionTitleDiv">
								<h2 class="questionTitleWord">这里是问题标题</h2>
							</div>
							<div class="questionerDiv">
								<div class="questionerInfo questionerHeadPhoto goToMainPageOfTA">
									<img src="image/default_headphoto.png" alt="用户头像" />
								</div>
								<div class="questionerInfo questionerNickname goToMainPageOfTA">
									<span class="questionerNicknameWord"></span>
									<span class="questionTimeAgo"></span>
								</div>
								<div class="questionerInfo">
									<button class="ui blue button followTA"><i class="plus square outline icon"></i>关注TA</button>
								</div>
							</div>
							<div class="questionDetailDiv" id="questionDetail">
								<textarea style='display:none;'></textarea>
							</div>
							<div class="toggleDetailDiv">
								<span class="detailPreview"></span><span class="toggleDetail"><span class="toggleDetailWord">展开描述</span><i
									 class="angle double down icon"></i></span>
							</div>
							<div class="questionInfos">
								<div class="questionInfo">
									<span class="collectNum">-</span><span class="infoDesc">收藏</span>
								</div>
								<div class="questionInfo">
									<span class="answerNum">-</span><span class="infoDesc">回答</span>
								</div>
								<div class="questionInfo">
									<span class="browseNum">-</span><span class="infoDesc">浏览</span>
								</div>
								<div class="goodQuestion goodQuestionBeforeClick">
									<i class="thumbs up outline icon"></i>好问题<span class="goodQuestionCount">-</span>
								</div>
							</div>
							<div class="questionActions">
								<div class="questionAction inviteToAnswerAction">
									<div class="actionIcon"><i class="envelope outline icon"></i></div>
									<div class="actionWord">邀请回答</div>
								</div>
								<!-- 邀请回答弹出框 -->
								<div class="ui custom popup top left transition hidden" id="inviteToAnswerPopup">
									<!-- 所有template的集合 -->
									<div class="allTemplates" style="display: none;">
										<!-- 空结果的模板 -->
										<div class="emptyResultTemplate">
											<div class="emptyResult">
												<div class="emptyImg">
													<img src="image/empty.png" alt="无" />
												</div>
												<div class="emptyWord">
													<h3>这里空空如也~</h3>
												</div>
											</div>
										</div>
										<!-- 每个被邀请者的模板 -->
										<div class="to_invite_Template">
											<div class="to_invite">
												<div class="ui divider"></div>
												<div class="to_invite_HeadPhoto">
													<a href="javascript:void(0);" target="_self"><img src="image/default_headphoto.png" alt="用户头像" /></a>
												</div>
												<div class="to_invite_Nickname">
													<a href="javascript:void(0);" target="_self">
														<h4>关注用户的昵称</h4>
													</a>
												</div>
												<div class="to_invite_action">
													<span class="inviteTA"><i class="envelope outline icon"></i>邀请</span>
												</div>
											</div>
										</div>
									</div>
									<div class="ui secondary pointing menu">
										<a class="active item" id="inviteMyFollows">
											我关注的
										</a>
										<a class="item" id="inviteAllUsers">
											所有用户
										</a>
									</div>
									<div class="ui" id="inviteMyFollowsTab">
										<div id="followers">
											<div class="ui fluid placeholder hideAfterTabLoaded">
												<div class="square image header">
													<div class="line"></div>
													<div class="line"></div>
												</div>
												<div class="square image header">
													<div class="line"></div>
													<div class="line"></div>
												</div>
												<div class="square image header">
													<div class="line"></div>
													<div class="line"></div>
												</div>
											</div>
											<div class="showAfterTabLoaded" style="display: none;">
												<div class="ui fluid icon input">
													<i class="search icon"></i>
													<input type="text" class="followsSearch" placeholder="搜索 - 个关注者...">
												</div>
												<div class="followslist">
										
												</div>
											</div>
										</div>
									</div>
									<div class="ui" id="inviteAllUsersTab" style="display: none;">
										<div id="allusers">
											<div class="ui fluid icon input">
												<i class="search icon"></i>
												<input type="text" class="allusersSearch" placeholder="搜索所有用户昵称/用户名...">
											</div>
											<div class="ui fluid placeholder hideAfterTabLoaded">
												<div class="square image header">
													<div class="line"></div>
													<div class="line"></div>
												</div>
												<div class="square image header">
													<div class="line"></div>
													<div class="line"></div>
												</div>
												<div class="square image header">
													<div class="line"></div>
													<div class="line"></div>
												</div>
											</div>
											<div class="showAfterTabLoaded" style="display: none;">
												<div class="alluserslist">
																					
												</div>
											</div>
										</div>
									</div>
								</div>
								<div class="questionAction writeAnswerAction">
									<div class="actionIcon"><i class="edit outline icon" style="margin-right: -2px;"></i></div>
									<div class="actionWord">写回答</div>
								</div>
								<div class="questionAction collectAction">
									<div class="ui active inverted dimmer collectLoader" style="display: none;">
										<div class="ui text loader">请稍候...</div>
									</div>
									<div class="actionIcon"><i class="star outline icon"></i></div>
									<div class="actionWord">收藏问题</div>
								</div>
							</div>
							<!-- 回答列表 -->
							<div class="ui">
								<!-- 切换回答排序规则 -->
								<div id="orderSelecton">
									<div class="ui secondary  menu">
										<a class="item new" id="loadNewAnswers">
											<i class="newspaper outline icon"></i>
											最新
										</a>
										<a class="item popular" id="loadPopularAnswers">
											<i class="hotjar icon"></i>
											最热
										</a>
										
									</div>
								</div>
											
								<div class="ui divider"></div>
								<!-- 每一个回答的HTML模板 -->
								<div id="eachanswertemplate" style="display: none;">
									<div class="eachanswercontainer">
										<!-- 回答内容 -->
										<div class="eachanswerbody ui four stackable column grid">
											<div class="eachanswercontent ten wide column">
												<p><a href="javascript:void(0);">这是回答的摘要详情部分</a></p>
											</div>
											<div class="eachanswerimg six wide column">
												<a href="javascript:void(0);"><img src="image/aside_ask.png"
													 alt="回答预览图片" /></a>
											</div>
										</div>
										<!-- 回答作者和关联信息 -->
										<div class="eachanswerbottom">
											<div class="eachanswerheadphoto">
											</div>
											<div class="eachansweranswerername">
												这里是作者名称
											</div>
											<br class="hiddenMoreThan540" />
											<div class="eachanswerinfo">
												<span class="info_collect"><i class="star outline icon"></i><span class="collect_count">99+</span></span>
												<span class="info_like"><i class="thumbs up outline icon"></i><span class="like_count">99+</span></span>
												<span class="info_comment"><i class="comment alternate outline icon"></i><span class="comment_count">99+</span></span>
												<span class="info_browsecount"><i class="eye icon"></i><span class="browse_count">99+</span></span>
											</div>
										</div>
										<div class="ui divider"></div>
									</div>
								</div>
								<div class="answers">
									
								</div>
								<!-- 模拟加载占位符 -->
								<div class="loadingHolder">
									<div class="ui fluid placeholder">
									  <div class="image header">
									    <div class="line"></div>
									    <div class="line"></div>
									  </div>
									  <div class="paragraph">
									    <div class="line"></div>
									    <div class="line"></div>
									    <div class="line"></div>
									  </div>
									</div>
									<div class="ui fluid placeholder">
									  <div class="image header">
									    <div class="line"></div>
									    <div class="line"></div>
									  </div>
									  <div class="paragraph">
									    <div class="line"></div>
									    <div class="line"></div>
									    <div class="line"></div>
									  </div>
									</div>
									<div class="ui fluid placeholder">
									  <div class="image header">
									    <div class="line"></div>
									    <div class="line"></div>
									  </div>
									  <div class="paragraph">
									    <div class="line"></div>
									    <div class="line"></div>
									    <div class="line"></div>
									  </div>
									</div>
								</div>
								<!-- 分页选择器 -->
								<div class="pageSelector" style="display: none;">
									<div class="ui pagination menu">
										<a class="item" id="lastPage">
											上一页
										</a>
										<a class="item hiddenLessThan768" id="firstPage">
											1
										</a>
										<div class="disabled item hiddenLessThan768">
											...
										</div>
										<a class="item hiddenLessThan768" id="maxPage">
											-
										</a>
										<a class="item hiddenLessThan768" id="pageInput">
											<div class="ui input">
											  <input type="text" value="1" style="width: 4em;text-align: center;" id="jumpPage" />
											</div>
											&nbsp;页
										</a>
										<a class="item" id="nextPage">
											下一页
										</a>
									</div>
								</div>
								<!-- 结果为空时显示 -->
								<div class="emptyResult hideIfNotEmpty">
									<div class="emptyImg">
										<img src="image/empty.png" alt="无" />
									</div>
									<div class="emptyWord">
										<h3>还没有回答哦，快来抢沙发~</h3>
									</div>
								</div>
							</div>
						</div>
						
					</div>
				</div>
			</main>
		</div>
	</body>
</html>
